---
title: Guides
---

import { Cards } from '../..'

# Guides

<Cards width={320}>

- [How it Works](/guides/how-it-works) Implementation details for the core
  library
- [JSX Pragma](/guides/jsx-pragma) Using JSX pragma to enable the `sx` prop
- [Motivation](/guides/motivation) Project background and prior art
- [Object Styles](/guides/object-styles) Authoring styles with object literal
  syntax
- [Variants](/guides/variants) Create stylistic theme-based variations
- [Layouts](/guides/layouts) Creating themeable page layouts
- [Styled Components](/guides/styled-components) Create reusable styled
  components
- [Responsive Typography](/guides/responsive-typography) Style content
  responsively
- [Nested ThemeUIProviders](/guides/nested-theme-providers) Add contextual theme
  and stylistic changes
- [Merging Themes](/guides/merging-themes) Merging theme objects together with
  JavaScript
- [Custom CacheProvider](/guides/custom-cache-provider) Customise the styles
  generated and where they are injected
- [Theme Color Meta Tag](/guides/theme-color-meta-tag) Use theme colors for the
  theme color meta tag
- [Color Mode Toggles](/guides/color-mode-toggles) Create buttons to switch
  color modes
- [Global Styles](/guides/global-styles) Add global styles with Emotion
- [TypeScript](/guides/typescript) Using Theme UI with TypeScript

</Cards>
